<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./lib/swiper/css/swiper.css">
  <script src="./lib/flexible/flexible.js"></script>
</head>

<body>

  <div class="sn_container">
    <!-- 头部 -->
    <div class="sn_header ">
      <div class="header_category "></div>
      <div class="header_cart "></div>
      <div class="info">
        <div class="search"></div>
        <input type="text" placeholder="年中大促,火力全开">
      </div>
    </div>
    <!-- 轮播 -->
    <div class="sn_banner">
        <div class="swiper-container">

            <!-- 放置图片的区域 -->
            <ul class="swiper-wrapper">
              <li class="swiper-slide"><a href="#"><img src="./images/banner01.jpg" alt=""></a></li>
              <li class="swiper-slide"><a href="#"><img src="./images/banner02.jpg" alt=""></a></li>
              <li class="swiper-slide"><a href="#"><img src="./images/banner03.jpg" alt=""></a></li>
              <li class="swiper-slide"><a href="#"><img src="./images/banner04.jpg" alt=""></a></li>
              <li class="swiper-slide"><a href="#"><img src="./images/banner05.jpg" alt=""></a></li>
              <li class="swiper-slide"><a href="#"><img src="./images/banner06.jpg" alt=""></a></li>
              <li class="swiper-slide"><a href="#"><img src="./images/banner07.jpg" alt=""></a></li>
              <li class="swiper-slide"><a href="#"><img src="./images/banner08.jpg" alt=""></a></li>
            </ul>
      
            <!-- 如果需要分页器, 小圆点 -->
            <div class="swiper-pagination"></div>
      
          </div>
      
    </div>
    <!-- 导航 -->
    <div class="sn_nav">
      <ul class="clearfix">
        <li>
          <a href="#">
            <img src="./images/nav01.png" alt="">
            <p>分类</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav02.png" alt="">
            <p>分类</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav03.png" alt="">
            <p>分类</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav04.png" alt="">
            <p>分类</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav05.png" alt="">
            <p>分类</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav06.png" alt="">
            <p>分类</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav07.png" alt="">
            <p>分类</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav08.png" alt="">
            <p>分类</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav09.png" alt="">
            <p>分类</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav10.png" alt="">
            <p>分类</p>
          </a>
        </li>
      </ul>
    </div>
    <!-- 底部 -->
    <div class="sn_footer">
      <ul class="clearfix">
        <li>
          <a href="#">
            <img src="./images/tabs01.png" alt="">
            <p>首页</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/tabs02.png" alt="">
            <p>首页</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/tabs03.png" alt="">
            <p>首页</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/tabs04.png" alt="">
            <p>首页</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/tabs05.png" alt="">
            <p>首页</p>
          </a>
        </li>
      </ul>
    </div>
  </div>

  
  <!-- 添加一个新模块 -->
  <div>第一个新模块添加完成</div>

  <!-- 添加第二个新模块 -->
  <div>第二个新模块添加完成</div>

  <!-- 登录模块 -->
  <div>登录模块完成</div>

  <!-- 注册模块 -->
  <div>注册模块完成</div>
  
  <!-- 上传新模块 -->
  <div>上传新模块</div>
  <div>你是猪吗</div>
  <div>不是吗?</div>
  <div>呵~~呵呵~~~呵呵呵~~~</div>
  <div>这是你弘哥第二次修改啦</div>
  <div>能不能成啊</div>

<script src="./lib/swiper/js/swiper.js"></script>
  <script>

 var mySwiper = new Swiper ('.swiper-container', {
    loop: true, // 循环模式选项

    // 如果需要分页器, 小圆点
    pagination: {
      el: '.swiper-pagination',
    },

    // effect
    // slide的切换效果，默认为"slide"（位移切换），
    // 可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
    effect: "cube"
  })


  </script>
</body>

</html>